<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAvwRoIm8IF058qTy5VcIi1xQISsUUOK8dlvUM1MYVFl7rXXQmsBQyUzlg8SJB7VQNTaEciGdF1l_hjw" type="text/javascript"></script>

    <script type="text/javascript">

		function GenerateMap()
		{
			// Create the map
			var map = new GMap2(document.getElementById("Map"));
			map.addControl(new GLargeMapControl());

            //Center the map
		    var startPoint = new GLatLng(37.50, 15.09);
			map.setCenter(startPoint, 15);

            //Draw a circle on map around startPoint, with radius 2 miles and 40 points
            drawCircle(map, startPoint, 0.2, 40);
		}

        var poly = [] ;
        var line ;

        // Draw a circle on map around center (radius in miles)
        // Modified by Jeremy Schneider based on http://maps.huge.info/dragcircle2.htm
        function drawCircle(map, center, radius, numPoints)
        {
            poly = [] ;
            var lat = center.lat() ;
            var lng = center.lng() ;
            var d2r = Math.PI/180 ;                // degrees to radians
            var r2d = 180/Math.PI ;                // radians to degrees
            var Clat = (radius/3963) * r2d ;      //  using 3963 as earth's radius
            var Clng = Clat/Math.cos(lat*d2r);

            //Add each point in the circle
            for (var i = 0 ; i < numPoints ; i++)
            {
                var theta = Math.PI * (i / (numPoints / 2)) ;
                Cx = lng + (Clng * Math.cos(theta)) ;
                Cy = lat + (Clat * Math.sin(theta)) ;
                poly.push(new GLatLng(Cy,Cx)) ;
            }

            //Remove the old line if it exists
            if(line)
            {
                map.removeOverlay(line) ;
            }

            //Add the first point to complete the circle
            poly.push(poly[0]) ;

            //Create a line with teh points from poly, red, 3 pixels wide, 80% opaque
            line = new GPolyline(poly,'#FF0000', 3, 0.8) ;

            map.addOverlay(line) ;
        }

    </script>

<body onload="GenerateMap()" >

<div data-role="header">
  <h1>Dove Siamo</h1>
  <A HREF="javascript:history.go(0)">Refresh</A>
  <%= link_to 'Home', posts_path, "class" => "ui-btn-right", "data-icon" => "home" %>
</div>

    <div data-role="content">
      <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
        <div id="Map" style="width: auto; height: 400px" ></div>
      </div>
    </div>

<div data-role="footer" style="height: 30px"  data-position="fixed"></div>

</body>